<template>
  <view class="page-mobile" :style="deviceWidth ? { width: deviceWidth + 'px' } : ''">
    <view style="height: 11px"></view>
    <!-- <view class="frequency-box">
			<view class="frequency-item" :class="tabIndex==1?'active':''" @click="changeTab(1)">新澳門六合彩</view>
			<view class="frequency-item" :class="tabIndex==2?'active':''" @click="changeTab(2)">澳門六合彩</view>
			<view class="frequency-item" :class="tabIndex==3?'active':''" @click="changeTab(3)">澳門六合彩3分</view>
		</view> -->
    <!-- 轮播图 -->
    <!-- <image src="../../static/redball2.svg" mode="" style="width: 100rpx;height: 100rpx;margin-bottom: 30rpx;"></image> -->
    <!-- <image src="../../static/redball.png" mode="" style="width: 100rpx;height: 100rpx;margin-bottom: 30rpx;"></image> -->
    <view class="carousel-container">
      <swiper autoplay interval="3000">
        <swiper-item class="carousel-slide" v-for="(item, index) in images">
          <image :src="item" mode="widthFix" />
        </swiper-item>
      </swiper>
    </view>
    <view>
      <u-notice-bar bgColor="#f2f4f7" color="#000"
        text="①永久易记域名：499.so   ②其他备用域名：49bba.com   49btv.com   49bbc.com"></u-notice-bar>
    </view>
    <!-- end -->
    <view style="padding: 3px; margin-bottom: 0.32rem">
      <view class="list-boder">
        <view class="title-info">
          <view class="title-info-l">
            <image src="../../static/am.png" mode="widthFix" style="width: 30px"></image>
            <text>新澳门六合彩</text>
          </view>
          <view class="mipai-box">
            <view class="operate-btn-4" @click="opengglDiaong('newam')">
              <text style="
                  margin-right: 3px;
                  color: rgb(26, 61, 150);
                  font-size: 14px;
                  font-weight: bold;
                  white-space: nowrap;
                ">刮奖眯号</text>
              <svg v-if="!showGGl" t="1718375852788" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="3014" width="22" height="22">
                <path
                  d="M511.5 746c168.708 0 321.167-90.915 402.8-234-81.633-143.085-234.092-234-402.8-234s-321.167 90.915-402.8 234c81.633 143.085 234.092 234 402.8 234zM19.504 492.075C112.844 308.295 301.634 190 511.5 190c209.867 0 398.655 118.296 491.996 302.075l10.12 19.925-10.12 19.925C910.156 715.705 721.366 834 511.5 834c-209.867 0-398.655-118.296-491.996-302.075L9.384 512l10.12-19.925zM512 671c-87.813 0-159-71.187-159-159s71.187-159 159-159 159 71.187 159 159-71.187 159-159 159z m0-88c39.212 0 71-31.788 71-71s-31.788-71-71-71-71 31.788-71 71 31.788 71 71 71z"
                  fill="#1a3d96" p-id="3015"></path>
              </svg>
              <svg v-if="showGGl" t="1718376473112" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="3175" width="22" height="22">
                <path
                  d="M816.735 392.609c23.948-16.884 48.504-34.194 73.666-51.93 45.496 43.008 83.948 94.01 113.095 151.396l10.12 19.925-10.12 19.925C910.156 715.705 721.366 834 511.5 834c-85.629 0-167.748-19.693-241.308-55.493a126426.42 126426.42 0 0 1 84.456-59.764C403.996 736.477 456.897 746 511.5 746c168.708 0 321.167-90.915 402.8-234a464.333 464.333 0 0 0-97.565-119.391z m-139.41-84.022C625.44 288.718 569.427 278 511.5 278c-168.708 0-321.167 90.915-402.8 234a464.315 464.315 0 0 0 103.832 124.777 65416.053 65416.053 0 0 0-73.757 52.294c-48.197-44.187-88.815-97.18-119.27-157.146L9.384 512l10.12-19.925C112.844 308.295 301.632 190 511.5 190c88.831 0 173.886 21.194 249.525 59.577a862427.371 862427.371 0 0 0-83.7 59.01zM443.857 655.699A429587.844 429587.844 0 0 1 670.2 495.944c0.53 5.28 0.801 10.636 0.801 16.056 0 87.813-71.187 159-159 159-24.386 0-47.49-5.49-68.143-15.301z m-89.033-119.54A160.242 160.242 0 0 1 353 512c0-87.813 71.187-159 159-159 27.292 0 52.977 6.876 75.419 18.99-40.078 28.27-77.89 54.947-113.456 80.048a71.196 71.196 0 0 0-5.619 3.965 321235.405 321235.405 0 0 0-113.52 80.155zM115.39 851.515c-19.018 15.127-46.698 11.973-61.825-7.045-15.127-19.018-11.973-46.698 7.045-61.825 16.64-13.236 299.253-213.08 864.8-611.613 19.864-13.998 47.314-9.242 61.312 10.622 13.998 19.864 9.242 47.314-10.622 61.312-553.782 390.242-846.339 597.118-860.71 608.549z"
                  fill="#1a3d96" p-id="3176"></path>
              </svg>
            </view>
          </view>
        </view>
        <view class="content-box">
          <view class="title-btn">
            <view class="title-info-r">
              <view class="title-info-r-t">
                <!-- <text>开奖时间</text> -->
                <text>
                  <text style="font-style: normal; color: rgb(0, 0, 0)">
                    第</text>
                  {{ newData[0].issue ? newData[0].issue : lastexpect_one ? lastexpect_one : newData[0].expect }}
                  <text space="emsp" style="font-style: normal; color: rgb(0, 0, 0)">期开奖结果</text>
                </text>
              </view>
            </view>
            <view class="title-btn-countdown">
              <view class="countdown">
                <text style="font-size: 15px">距离下期开奖:</text>
                <view class="countdown-box">
                  <view class="countdown-item">{{
                    newData[0].issue == null ? 0 : hoursTens
                    }}</view>
                  <view class="countdown-item">{{
                    newData[0].issue == null ? 0 : hoursUnits
                    }}</view>
                </view>
                <view class="countdown-box">
                  <view class="countdown-split">:</view>
                </view>
                <view class="countdown-box">
                  <view class="countdown-item">{{
                    newData[0].issue == null ? 0 : minutesTens
                    }}</view>
                  <view class="countdown-item">{{ newData[0].issue == null ? 0 : minutesUnits }}
                  </view>
                </view>
                <view class="countdown-box">
                  <view class="countdown-split">:</view>
                </view>
                <view class="countdown-box">
                  <view class="countdown-item">{{
                    newData[0].issue == null ? 0 : secondsTens
                    }}</view>
                  <view class="countdown-item">{{ newData[0].issue == null ? 0 : secondsUnits }}
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view style="height: 0.107rem"></view>
          <view style="position: relative; overflow: hidden; margin-top: 5px" :class="showGGl ? 'hide' : ''">
            <view class="open_code_zone_left-content" v-if="newData[0].opencode">
              <view class="open_code_zone_left-item" v-for="(item, index) of newData[0].opencode
                .split(',')
                .slice(0, 6)" :key="index">
                <view class="open_code_zone_left-item-number" :style="judgingStyle(newData[0].wave.split(',')[index])">
                  {{ item }}
                </view>
                <view class="open_code_zone_left-item-zodiac">{{ newData[0].zodiac.split(",")[index] }}
                </view>
              </view>
              <view class="open_code_zone_left-item" v-if="newData[0].opencode.split(',').length > 6">
                <view class="open_code_zone_left-item-plus">+</view>
                <!-- <view class="open_code_zone_left-item-zodiac">
								<text style="opacity: 0;">澳</text></view> -->
              </view>
              <view class="open_code_zone_left-item">
                <view class="open_code_zone_left-item-number" v-if="newData[0].opencode.split(',').length > 6" :style="judgingStyle(
                  newData[0].wave.split(',')[
                  newData[0].wave.split(',').length - 1
                  ]
                )
                  ">
                  <span>{{
                    newData[0].opencode.split(",")[
                    newData[0].opencode.split(",").length - 1
                    ]
                  }}</span>
                </view>
                <view class="open_code_zone_left-item-zodiac">
                  <span v-if="newData[0].opencode.split(',').length > 6" :style="winningStyle == 3 ? 'position: relative; top: 0px;' : ''
                    ">
                    {{
                      newData[0].zodiac.split(",")[
                      newData[0].zodiac.split(",").length - 1
                      ]
                    }}</span>
                </view>
              </view>
            </view>
          </view>
          <view style="text-align: center; font-size: 15px; margin-top: 15px">
            <text v-if="newData[0].issue" style="color: #000;"> 第<text space="emsp">{{
              Number(newData[0].issue ? newData[0].issue : lastexpect_one) + 1
                }}</text>期</text>
            <text style="margin-left: 10px;">{{ last_one.textTime }}</text>
          </view>
        </view>
      </view>
      <view class="list-boder">
        <view class="title-info">
          <view class="title-info-l">
            <image src="../../static/am.png" mode="widthFix" style="width: 30px"></image>
            <text>澳门六合彩</text>
          </view>
          <view class="mipai-box">
            <view class="operate-btn-4" @click="opengglDiaong('oldam')">
              <text style="
                  margin-right: 3px;
                  color: rgb(26, 61, 150);
                  font-size: 14px;
                  font-weight: bold;
                  white-space: nowrap;
                ">刮奖眯号</text>
              <svg v-if="!showGGl" t="1718375852788" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="3014" width="22" height="22">
                <path
                  d="M511.5 746c168.708 0 321.167-90.915 402.8-234-81.633-143.085-234.092-234-402.8-234s-321.167 90.915-402.8 234c81.633 143.085 234.092 234 402.8 234zM19.504 492.075C112.844 308.295 301.634 190 511.5 190c209.867 0 398.655 118.296 491.996 302.075l10.12 19.925-10.12 19.925C910.156 715.705 721.366 834 511.5 834c-209.867 0-398.655-118.296-491.996-302.075L9.384 512l10.12-19.925zM512 671c-87.813 0-159-71.187-159-159s71.187-159 159-159 159 71.187 159 159-71.187 159-159 159z m0-88c39.212 0 71-31.788 71-71s-31.788-71-71-71-71 31.788-71 71 31.788 71 71 71z"
                  fill="#1a3d96" p-id="3015"></path>
              </svg>
              <svg v-if="showGGl" t="1718376473112" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="3175" width="22" height="22">
                <path
                  d="M816.735 392.609c23.948-16.884 48.504-34.194 73.666-51.93 45.496 43.008 83.948 94.01 113.095 151.396l10.12 19.925-10.12 19.925C910.156 715.705 721.366 834 511.5 834c-85.629 0-167.748-19.693-241.308-55.493a126426.42 126426.42 0 0 1 84.456-59.764C403.996 736.477 456.897 746 511.5 746c168.708 0 321.167-90.915 402.8-234a464.333 464.333 0 0 0-97.565-119.391z m-139.41-84.022C625.44 288.718 569.427 278 511.5 278c-168.708 0-321.167 90.915-402.8 234a464.315 464.315 0 0 0 103.832 124.777 65416.053 65416.053 0 0 0-73.757 52.294c-48.197-44.187-88.815-97.18-119.27-157.146L9.384 512l10.12-19.925C112.844 308.295 301.632 190 511.5 190c88.831 0 173.886 21.194 249.525 59.577a862427.371 862427.371 0 0 0-83.7 59.01zM443.857 655.699A429587.844 429587.844 0 0 1 670.2 495.944c0.53 5.28 0.801 10.636 0.801 16.056 0 87.813-71.187 159-159 159-24.386 0-47.49-5.49-68.143-15.301z m-89.033-119.54A160.242 160.242 0 0 1 353 512c0-87.813 71.187-159 159-159 27.292 0 52.977 6.876 75.419 18.99-40.078 28.27-77.89 54.947-113.456 80.048a71.196 71.196 0 0 0-5.619 3.965 321235.405 321235.405 0 0 0-113.52 80.155zM115.39 851.515c-19.018 15.127-46.698 11.973-61.825-7.045-15.127-19.018-11.973-46.698 7.045-61.825 16.64-13.236 299.253-213.08 864.8-611.613 19.864-13.998 47.314-9.242 61.312 10.622 13.998 19.864 9.242 47.314-10.622 61.312-553.782 390.242-846.339 597.118-860.71 608.549z"
                  fill="#1a3d96" p-id="3176"></path>
              </svg>
            </view>
          </view>
        </view>
        <view class="content-box">
          <view class="title-btn">
            <view class="title-info-r">
              <view class="title-info-r-t">
                <!-- <text>开奖时间</text> -->
                <text>
                  <text style="font-style: normal; color: rgb(0, 0, 0)">
                    第</text>
                  {{ newData2[0].issue ? newData2[0].issue : lastexpect }}
                  <text space="emsp" style="font-style: normal; color: rgb(0, 0, 0)">期开奖结果</text>
                </text>
              </view>
              <!-- <view class="title-info-r-b">
								{{newData2[0].openTime}}&nbsp;&nbsp;&nbsp;&nbsp;{{getDayOfWeek(newData2[0].openTime)}}
							</view> -->
            </view>
            <view class="title-btn-countdown">
              <view class="countdown">
                <text style="font-size: 15px">距离下期开奖:</text>
                <view class="countdown-box">
                  <view class="countdown-item">{{
                    newData2[0].issue == null ? 0 : hoursTens2
                    }}</view>
                  <view class="countdown-item">{{ newData2[0].issue == null ? 0 : hoursUnits2 }}
                  </view>
                </view>
                <view class="countdown-box">
                  <view class="countdown-split">:</view>
                </view>
                <view class="countdown-box">
                  <view class="countdown-item">{{ newData2[0].issue == null ? 0 : minutesTens2 }}
                  </view>
                  <view class="countdown-item">{{ newData2[0].issue == null ? 0 : minutesUnits2 }}
                  </view>
                </view>
                <view class="countdown-box">
                  <view class="countdown-split">:</view>
                </view>
                <view class="countdown-box">
                  <view class="countdown-item">{{ newData2[0].issue == null ? 0 : secondsTens2 }}
                  </view>
                  <view class="countdown-item">{{ newData2[0].issue == null ? 0 : secondsUnits2 }}
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view style="height: 0.107rem"></view>
          <view style="position: relative; overflow: hidden; margin-top: 5px" :class="showGGl ? 'hide' : ''">
            <view class="open_code_zone_left-content" v-if="newData2[0].opencode">
              <view class="open_code_zone_left-item" v-for="(item, index) of newData2[0].opencode
                .split(',')
                .slice(0, 6)" :key="index">
                <view class="open_code_zone_left-item-number" :style="judgingStyle(newData2[0].wave.split(',')[index])">
                  {{ item }}
                </view>
                <view class="open_code_zone_left-item-zodiac">{{ newData2[0].zodiac.split(",")[index] }}
                </view>
              </view>
              <view class="open_code_zone_left-item" v-if="newData2[0].opencode.split(',').length > 6">
                <view class="open_code_zone_left-item-plus">+</view>
                <!-- <view class="open_code_zone_left-item-zodiac"><text style="opacity: 0;">澳</text></view> -->
              </view>
              <view class="open_code_zone_left-item">
                <view class="open_code_zone_left-item-number" v-if="newData2[0].opencode.split(',').length > 6" :style="judgingStyle(
                  newData2[0].wave.split(',')[
                  newData2[0].wave.split(',').length - 1
                  ]
                )
                  ">
                  <span>{{
                    newData2[0].opencode.split(",")[
                    newData2[0].opencode.split(",").length - 1
                    ]
                  }}</span>
                </view>
                <view class="open_code_zone_left-item-zodiac">
                  <span v-if="newData2[0].opencode.split(',').length > 6" :style="winningStyle == 3 ? 'position: relative; top: 0px;' : ''
                    ">{{
                      newData2[0].zodiac.split(",")[
                      newData2[0].zodiac.split(",").length - 1
                      ]
                    }}</span>
                </view>
              </view>
            </view>
            <view class="canvas" :style="{ zIndex: showGGl2 ? 999 : -1 }">
              <canvas style="width: 100%; height: 77px" id="canvas2" ref="canvas2" canvas-id="canvas2"
                @touchstart="touchstart($event, 2)" @touchmove="touchmove($event, 2)"></canvas>
            </view>
          </view>
          <view style="text-align: center; font-size: 15px; margin-top: 15px">
            <text v-if="newData2[0].issue">
              第<text space="emsp">{{
                Number(newData2[0].issue ? newData2[0].issue : lastexpect) + 1
                }}</text>期
            </text>
            <text style="margin-left: 10px;">{{ last_two.textTime }}</text>
          </view>
        </view>
      </view>
      <view class="list-boder">
        <view class="title-info">
          <view class="title-info-l">
            <image src="../../static/xg1.png" mode="widthFix" style="width: 30px"></image>
            <text>香港六合彩</text>
          </view>
          <view class="mipai-box">
            <view class="operate-btn-4" @click="opengglDiaong('xg')">
              <text style="
                  margin-right: 3px;
                  color: rgb(26, 61, 150);
                  font-size: 14px;
                  font-weight: bold;
                  white-space: nowrap;
                ">刮奖眯号</text>
              <svg v-if="!showGGl" t="1718375852788" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="3014" width="22" height="22">
                <path
                  d="M511.5 746c168.708 0 321.167-90.915 402.8-234-81.633-143.085-234.092-234-402.8-234s-321.167 90.915-402.8 234c81.633 143.085 234.092 234 402.8 234zM19.504 492.075C112.844 308.295 301.634 190 511.5 190c209.867 0 398.655 118.296 491.996 302.075l10.12 19.925-10.12 19.925C910.156 715.705 721.366 834 511.5 834c-209.867 0-398.655-118.296-491.996-302.075L9.384 512l10.12-19.925zM512 671c-87.813 0-159-71.187-159-159s71.187-159 159-159 159 71.187 159 159-71.187 159-159 159z m0-88c39.212 0 71-31.788 71-71s-31.788-71-71-71-71 31.788-71 71 31.788 71 71 71z"
                  fill="#1a3d96" p-id="3015"></path>
              </svg>
              <svg v-if="showGGl" t="1718376473112" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="3175" width="22" height="22">
                <path
                  d="M816.735 392.609c23.948-16.884 48.504-34.194 73.666-51.93 45.496 43.008 83.948 94.01 113.095 151.396l10.12 19.925-10.12 19.925C910.156 715.705 721.366 834 511.5 834c-85.629 0-167.748-19.693-241.308-55.493a126426.42 126426.42 0 0 1 84.456-59.764C403.996 736.477 456.897 746 511.5 746c168.708 0 321.167-90.915 402.8-234a464.333 464.333 0 0 0-97.565-119.391z m-139.41-84.022C625.44 288.718 569.427 278 511.5 278c-168.708 0-321.167 90.915-402.8 234a464.315 464.315 0 0 0 103.832 124.777 65416.053 65416.053 0 0 0-73.757 52.294c-48.197-44.187-88.815-97.18-119.27-157.146L9.384 512l10.12-19.925C112.844 308.295 301.632 190 511.5 190c88.831 0 173.886 21.194 249.525 59.577a862427.371 862427.371 0 0 0-83.7 59.01zM443.857 655.699A429587.844 429587.844 0 0 1 670.2 495.944c0.53 5.28 0.801 10.636 0.801 16.056 0 87.813-71.187 159-159 159-24.386 0-47.49-5.49-68.143-15.301z m-89.033-119.54A160.242 160.242 0 0 1 353 512c0-87.813 71.187-159 159-159 27.292 0 52.977 6.876 75.419 18.99-40.078 28.27-77.89 54.947-113.456 80.048a71.196 71.196 0 0 0-5.619 3.965 321235.405 321235.405 0 0 0-113.52 80.155zM115.39 851.515c-19.018 15.127-46.698 11.973-61.825-7.045-15.127-19.018-11.973-46.698 7.045-61.825 16.64-13.236 299.253-213.08 864.8-611.613 19.864-13.998 47.314-9.242 61.312 10.622 13.998 19.864 9.242 47.314-10.622 61.312-553.782 390.242-846.339 597.118-860.71 608.549z"
                  fill="#1a3d96" p-id="3176"></path>
              </svg>
            </view>
          </view>
        </view>
        <view class="content-box">
          <view class="title-btn">
            <view class="title-info-r">
              <view class="title-info-r-t">
                <!-- <text>开奖时间</text> -->
                <text>
                  <text style="font-style: normal; color: rgb(0, 0, 0)">
                    第</text>
                  {{
                    newData3[0].issue ? newData3[0].issue : lastexpect_three
                  }}
                  <text space="emsp" style="font-style: normal; color: rgb(0, 0, 0)">期开奖结果</text>
                </text>
              </view>
              <!-- <view class="title-info-r-b">
								{{newData3[0].openTime}}&nbsp;&nbsp;&nbsp;&nbsp;{{getDayOfWeek(newData3[0].openTime)}}
							</view> -->
            </view>
            <view class="title-btn-countdown">
              <view class="countdown">
                <text style="font-size: 15px">距离下期开奖:</text>
                <view class="countdown-box">
                  <view class="countdown-item">{{
                    newData3[0].issue == null ? 0 : hoursTens3
                    }}</view>
                  <view class="countdown-item">{{ newData3[0].issue == null ? 0 : hoursUnits3 }}
                  </view>
                </view>
                <view class="countdown-box">
                  <view class="countdown-split">:</view>
                </view>
                <view class="countdown-box">
                  <view class="countdown-item">{{ newData3[0].issue == null ? 0 : minutesTens3 }}
                  </view>
                  <view class="countdown-item">{{ newData3[0].issue == null ? 0 : minutesUnits3 }}
                  </view>
                </view>
                <view class="countdown-box">
                  <view class="countdown-split">:</view>
                </view>
                <view class="countdown-box">
                  <view class="countdown-item">{{ newData3[0].issue == null ? 0 : secondsTens3 }}
                  </view>
                  <view class="countdown-item">{{ newData3[0].issue == null ? 0 : secondsUnits3 }}
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view style="height: 0.107rem"></view>

          <view style="position: relative; overflow: hidden; margin-top: 5px" :class="showGGl ? 'hide' : ''">
            <view class="open_code_zone_left-content">
              <view class="open_code_zone_left-item" v-for="(item, index) of newData3[0].opencode
                .split(',')
                .slice(0, 6)" :key="index">
                <view class="open_code_zone_left-item-number" :style="judgingStyle(newData3[0].wave.split(',')[index])">
                  {{ item }}
                </view>
                <view class="open_code_zone_left-item-zodiac">{{ newData3[0].zodiac.split(",")[index] }}
                </view>
              </view>
              <view class="open_code_zone_left-item" v-if="newData3[0].opencode.split(',').length > 6">
                <view class="open_code_zone_left-item-plus">+</view>
                <!-- <view class="open_code_zone_left-item-zodiac"><text style="opacity: 0;">澳</text></view> -->
              </view>
              <view class="open_code_zone_left-item">
                <view class="open_code_zone_left-item-number" v-if="newData3[0].opencode.split(',').length > 6" :style="judgingStyle(
                  newData3[0].wave.split(',')[
                  newData3[0].wave.split(',').length - 1
                  ]
                )
                  ">
                  <span>{{
                    newData3[0].opencode.split(",")[
                    newData3[0].opencode.split(",").length - 1
                    ]
                  }}</span>
                </view>
                <view class="open_code_zone_left-item-zodiac">
                  <span v-if="newData3[0].opencode.split(',').length > 6" :style="winningStyle == 3 ? 'position: relative; top: 0px;' : ''
                    ">{{
                      newData3[0].zodiac.split(",")[
                      newData3[0].zodiac.split(",").length - 1
                      ]
                    }}</span>
                </view>
              </view>
            </view>
          </view>
          <view style="text-align: center; font-size: 15px; margin-top: 15px">
            <text v-if="newData3[0].issue">
              第<text space="emsp">{{ Number(last_three.issue) + 1 }}</text>期
            </text>
            <text style="margin-left: 10px;">{{ last_three.textTime }}</text>
          </view>
        </view>
      </view>
    </view>
    <view style="height: 88.3px"> </view>
    <Showggl @close="close" :puptype="puptype" :pup_obj_oldam="newData2[0]" :new_times_obj="countdownFormatted.newMacao"
      :old_times_obj="countdownFormatted.oldMacao" :xg_times_obj="countdownFormatted.hkLottery"
      :pup_obj_newam="newData[0]" :pup_obj_xg="newData3[0]" :show="showGGl">
    </Showggl>
    <!-- <view style="height: 1px; background-color: rgb(161, 153, 153);"></view> -->
    <!-- <Prizeinfo :showlive="tabIndex" :list="newData" :showGGl="showGGl" /> -->
    <!-- 在template中添加一个测试按钮 -->
    <!-- <view style="margin: 10px;">
      <button @click="testWebSocket" type="primary">测试WebSocket连接</button>
    </view> -->
  </view>
</template>

<script>
import Prizeinfo from "@/components/prizeinfo.vue";
import Showggl from "@/components/showggl.vue";
import { mapState, mapActions, mapGetters } from "vuex";
import {
  oldamhomeApi,
  oldamcodehomeApi,
  newamhomeApi,
  newamcodehomeApi,
  xghomeApi,
  getnewMacao,
  getoldMacao,
  gethkLott,
  getupxgDetadeil,
  gethkLott2,
} from "@/api/user.js";
import { websocketUrl } from "@/common/config.js";
import { connectWebsocket } from "@/common/websocket.js";
import { LotteryManager } from "@/utils/lottery-manager";
import { LOTTERY_CONFIG, DEFAULT_LOTTERY_DATA } from "@/common/lottery-config";

// 创建 API 映射对象
const API_MAP = {
  getnewMacao,
  getoldMacao,
  gethkLott,
  getupxgDetadeil,
  gethkLott2
};

export default {
  data() {
    return {
      deviceWidth: null,
      puptype: "",
      showGGl: false,
      showGGl2: false,
      images: ["../../static/gg.png"],
      lotteryManager: null,

      // 倒计时数据 - 新澳门
      hoursTens: "0",
      hoursUnits: "0",
      minutesTens: "0",
      minutesUnits: "0",
      secondsTens: "0",
      secondsUnits: "0",

      // 倒计时数据 - 澳门
      hoursTens2: "0",
      hoursUnits2: "0",
      minutesTens2: "0",
      minutesUnits2: "0",
      secondsTens2: "0",
      secondsUnits2: "0",

      // 倒计时数据 - 香港
      hoursTens3: "0",
      hoursUnits3: "0",
      minutesTens3: "0",
      minutesUnits3: "0",
      secondsTens3: "0",
      secondsUnits3: "0",

      // 各彩种数据
      newData: [{ ...DEFAULT_LOTTERY_DATA }],
      newData2: [{ ...DEFAULT_LOTTERY_DATA }],
      newData3: [{ ...DEFAULT_LOTTERY_DATA }],

      // 期号信息
      lastexpect: "",
      lastexpect_one: "",
      lastexpect_three: "",
      last_one: { issue: null, textTime: "" },
      last_two: { issue: null, textTime: "" },
      last_three: { issue: null, textTime: "" },

      // 倒计时格式化数据（用于传递给刮刮乐组件）
      countdownFormatted: {
        newMacao: "",
        oldMacao: "",
        hkLottery: "",
      },

      // 初始化 issueInfo 对象
      issueInfo: {
        newMacao: {
          current: "",
          next: "",
          drawTime: null,
        },
        oldMacao: {
          current: "",
          next: "",
          drawTime: null,
        },
        hkLottery: {
          current: "",
          next: "",
          drawTime: null,
        },
      },
    };
  },
  components: {
    Prizeinfo,
    Showggl,
  },
  mounted() {
    this.initLottery();
    this.getDeviceWidth();
    // this.testWebSocket();
    // this.testWebSocket2();
  },
  beforeDestroy() {
    this.lotteryManager.clearAllTimers();
  },
  computed: {
    ...mapState(["winningStyle", "balls"]),
    ...mapGetters(["judgingStyle"]),
  },
  watch: {
    newData: {
      deep: true,
      handler(newVal) {
        console.log("newData changed:", newVal);
      },
    },
    newData2: {
      deep: true,
      handler(newVal) {
        console.log("newData2 changed:", newVal);
      },
    },
    newData3: {
      deep: true,
      handler(newVal) {
        console.log("newData3 changed:", newVal);
      },
    },
  },
  methods: {
    ...mapActions(["changeWinningStyle"]),
    close() {
      this.showGGl = false;
      this.$stats();
    },
    opengglDiaong(type) {
      this.$stop();
      this.showGGl = !this.showGGl;
      this.puptype = type;
    },
    // 初始化彩票管理器
    async initLottery() {
      this.lotteryManager = new LotteryManager(this);
      await this.startAllLotteries();
    },

    // 启动所有彩票
    async startAllLotteries() {
      try {
        const lotteryTypes = Object.keys(LOTTERY_CONFIG);
        await Promise.all(lotteryTypes.map((type) => this.startLottery(type)));
        console.log("All lotteries started successfully", lotteryTypes);
      } catch (error) {
        console.error("启动彩票失败:", error);
        // 5秒后重试
        setTimeout(() => this.startAllLotteries(), 5000);
      }
    },

    // 启动单个彩票
    async startLottery(type) {
      const config = LOTTERY_CONFIG[type];
      try {
        const apiFunc = API_MAP[config.apiName];
        if (!apiFunc) {
          throw new Error(`API ${config.apiName} not found`);
        }

        // 获取彩票数据
        let result = await apiFunc();
        console.log(config.nextIssueApiName, type , "nextIssueApiName");
        // 香港彩特殊处理
        if (type === "HK" && config.nextIssueApiName ) {
          console.log("香港彩的时间")
          const nextIssueFunc = API_MAP[config.nextIssueApiName];
          if (!nextIssueFunc) {
            throw new Error(`API ${config.nextIssueApiName} not found`);
          }
          // const nextIssue = await nextIssueFunc();
          // const nextDrawTime = this.getXGDay(nextIssue.result.data.next_issue);
          const nextIssue = await gethkLott2();
          // const nextIssue = {
          //   "data": {
          //     "nextTime": "2025-01-11 23:04:00",
          //   }
          // }

          const nextDrawTime = nextIssue.data.nextTime;
          console.log(nextDrawTime, "nextDrawTimexx");
          // 更新 issueInfo
          this.issueInfo.hkLottery = {
            current: result.issue || "",
            next: nextIssue.data.nextTime,
            drawTime: nextDrawTime,
          };

          result[0].nextDrawTime = nextDrawTime;
        }
        console.log("resultaaaaa", result, type);
        // 处理开奖数据
        await this.processLotteryData(type, result);
        console.log("resultbbbbbb", result, type);
        // 启动倒计时
        this.startCountdown(type);
      } catch (error) {
        console.error(`获取${config.name}数据失败:`, error);
        this.handleLotteryError(type);
      }
    },

    // 处理彩票数据
    async processLotteryData(type, data) {
      console.log("Processing data:", type, data);
      const config = LOTTERY_CONFIG[type];

      try {
        // 处理数据结构，确保我们获取正确的数据对象
        let processedData = data;
        if (Array.isArray(data)) {
          processedData = data[0];
        } else if (data.data && Array.isArray(data.data)) {
          processedData = data.data[0];
        }

        // 统一处理 opencode
        let opencode = null;
        if (processedData.opencode) {
          opencode = processedData.opencode;
        } else if (processedData.openCode) {
          opencode = processedData.openCode;
        } else if (processedData.OPENCODE) {
          opencode = processedData.OPENCODE;
        }

        if (!opencode) {
          console.error("No opencode found for " + type, processedData);
          return;
        }

        // 检查是否需要显示开奖动画
        const currentTime = new Date();
        const openTime = new Date(processedData.openTime || processedData.opentime);
        const today = new Date().toISOString().split('T')[0];
        const openTimeStr = openTime.toISOString().split('T')[0];

        // 设置开奖时间范围
        const startTime = new Date(today + ' 21:30:00');
        const endTime = new Date(today + ' 21:36:00');
        console.log(currentTime, startTime, openTime, 'currentTime');

        // 检查是否需要轮询：
        // 1. 当前时间在开奖时间之后
        // 2. 开奖时间不是今天（说明还没有今天的开奖数据��
        const needPolling = currentTime > startTime && openTimeStr !== today;

        // 判断是否需要显示动画
        const needsAnimation = currentTime >= startTime &&
          currentTime <= endTime &&
          openTimeStr === today;

        // 处理 zodiac 和 wave 数据
        const opencodeArray = opencode.split(',');
        const zodiacArray = [];
        const waveArray = [];

        opencodeArray.forEach(number => {
          const ballInfo = this.$store.getters.getBallInfo(number);
          if (ballInfo) {
            zodiacArray.push(`${ballInfo.zodiac}/${ballInfo.line8}`);
            waveArray.push(ballInfo.wave);
          }
        });

        // 更新数据
        const updatedData = {
          ...DEFAULT_LOTTERY_DATA,
          ...processedData,
          opencode: opencode,
          zodiac: zodiacArray.join(','),
          wave: waveArray.join(','),
          issue: processedData.expect || processedData.issue,
          openTime: processedData.openTime || processedData.opentime
        };

        // 更新状态
        if (needsAnimation) {
          console.log("到这了")
          // 先重置为默认状态
          this[config.stateKey][0] = { ...DEFAULT_LOTTERY_DATA };
          // 重新启动倒计时
          this.startCountdown(type);
          // 显示动画
          await this.lotteryManager.showDrawNumbers(type, updatedData);
        } else {
          // 直接显示结果
          this[config.stateKey][0] = updatedData;
          console.log(type, config, 'type');

          // 如果需要轮询（在开奖时间后且还没有今天的数据）
          if (needPolling && type !== 'HK') {
            console.log(`当前时间在开奖时间之后且未开奖，开始轮询下一期数据 - ${config.name}`);
            this.startPolling(type);
          } else if (type === 'HK') {
            // 香港彩特殊处理逻辑保持不变
            try {
              const nextIssue = await gethkLott2();
              console.log(nextIssue, 'nextIssue')
              const nextDrawTimeStr = nextIssue.data.nextTime;
              const nextDrawTime = new Date(nextDrawTimeStr);
              const today = new Date().toISOString().split('T')[0];
              const currentTime = new Date();
              const startTime = new Date(today + ' 21:30:00');
              const endTime = new Date(today + ' 21:38:00');
              
              // 判断下一期开奖日期是否是今天
              const nextDrawDay = nextDrawTime.toISOString().split('T')[0];
              const isDrawDay = nextDrawDay === today;
              
              // 判断是否在开奖时间段内且是开奖日
              const isDrawingTime = currentTime >= startTime && 
                                       currentTime <= endTime && 
                                       isDrawDay;
              
              // 判断是否需要轮询：
              // 1. 当前时间在开奖时间之后
              // 2. 是开奖日
              // 3. 还没有今天的开奖数据
              const needPolling = currentTime > startTime && 
                                 isDrawDay && 
                                 openTimeStr !== today;
              console.log(nextIssue.data.currentResult.split(',')[0],opencode.split(',')[0], 'nextIssue.code')
              if (isDrawingTime || needPolling || nextIssue.data.currentResult.split(',')[0] !== opencode.split(',')[0]) {
                // 在开奖时间段内或需要轮询时，显示开奖中状态并开始轮询
                console.log('香港彩开奖时间已到或需要轮询');
                // 重置为默认状态（显示"正在进行搅珠中"）
                this[config.stateKey][0] = { ...DEFAULT_LOTTERY_DATA };
                this.startPolling(type);
              } else {
                // 如果不是开奖日或不在开奖时间段内，显示倒计时
                console.log('香港彩等待开奖，启动倒计时到下一期');
                this.startCountdown(type);
              }
            } catch (error) {
              console.error('处理香港彩数据失败:', error);
              // 发生错误时启动默认倒计时
              this.startCountdown(type);
            }
          } else {
            // 否���启动倒计时
            this.startCountdown(type);
          }
        }

        // 更新期号信息
        this.updateIssueInfo(type, updatedData);
      } catch (error) {
        console.error("Error processing lottery data for " + type + ":", error);
        this.handleLotteryError(type);
      }
    },

    // 启动倒计时
    startCountdown(type) {
      console.log("startCountdown", this[LOTTERY_CONFIG[type].stateKey][0]);
      this.lotteryManager.startCountdown(type, (countdown) => {
        this.updateCountdownDisplay(type, countdown);
        // console.log(countdown,'countdownaaa')
        // 如果倒计时结束，开始轮询
        if (
          countdown.hours === 0 &&
          countdown.minutes === 0 &&
          countdown.seconds === 0
        ) {
          console.log("倒计时结束，开始轮询");
          this.startPolling(type);
        }
      });
    },
    // 开始轮询
    startPolling(type) {
      const config = LOTTERY_CONFIG[type];
      console.log(config, 'config')
      const apiFunc = API_MAP[config.apiName];
      // 先重置为默认状态
      this[config.stateKey][0] = { ...DEFAULT_LOTTERY_DATA };
      // // 检查是否需要轮询
      // const now = new Date()
      // const targetTime = new Date(now)
      // targetTime.setHours(21, 30, 0)

      // // 如果当前时间已经超过今天的开奖时间，不需要轮询
      // if (now > targetTime) {
      // 	console.log(`${config.name} 已过开奖时间，无需轮询`)
      // 	return
      // }

      const pollingInterval = setInterval(async () => {
        try {
          const result = await apiFunc();
          // 检查是否有有效的开奖结果
          if (this.isValidResult(result)) {
            console.log(`${config.name} 获取到有效开奖结果，停止轮询`);
            clearInterval(pollingInterval);
             // 获取下一期开奖时间
             if (type === 'HK') {
              const nextIssue = await gethkLott2();
              const nextDrawTime = nextIssue.data.nextTime;
              
              // 更新数据并启动新的倒计时
              await this.processLotteryData(type, {
                ...result[0],
                nextDrawTime: nextDrawTime
              });
              // // 启动到下一期的倒计时
              this.startCountdown(type);
            }else{
              await this.processLotteryData(type, result);
            }
          }
        } catch (error) {
          console.error(`轮询${config.name}数据失败:`, error);
          clearInterval(pollingInterval); // 发生错误时停止轮询
        }
      }, 3000);
    },

    // 添加 isValidResult 方法
    isValidResult(result) {
      try {
        // 处理数据结构
        let data = result;
        if (Array.isArray(result)) {
          data = result[0];
        } else if (result.data && Array.isArray(result.data)) {
          data = result.data[0];
        }

        // 检查是否有开奖号码
        const opencode = data.opencode || data.openCode || data.OPENCODE;
        if (!opencode) return false;

        // 检查号码格式是否正确（7个数字）
        const numbers = opencode.split(",");
        if (numbers.length !== 7) return false;

        // 检查是否有空值或连续的逗号
        if (opencode.includes(",,") || numbers.some(num => !num.trim())) {
          return false;
        }

        // 检查是否都是有效数字
        const validNumbers = numbers.every(
          (num) => !isNaN(num) && num.length > 0
        );
        if (!validNumbers) return false;

        // 检查开奖时间是否为今天
        const openTime = data.openTime || data.opentime;
        if (!openTime) return false;

        // 获取今天的日期（年月日）
        const today = new Date();
        const todayStr = today.toISOString().split("T")[0];

        // 获取开奖���间的日期（年月日）
        const openDate = new Date(openTime);
        const openDateStr = openDate.toISOString().split("T")[0];

        // 比较日期是否相同
        return todayStr === openDateStr;
      } catch (error) {
        console.error("Error checking result validity:", error);
        return false;
      }
    },
    // 更新倒计时显示
    updateCountdownDisplay(type, countdown) {
      const { hours, minutes, seconds } = countdown;

      // 更新对应彩种的倒计时数据
      if (type === "NEW_MACAO") {
        this.hoursTens = Math.floor(hours / 10).toString();
        this.hoursUnits = (hours % 10).toString();
        this.minutesTens = Math.floor(minutes / 10).toString();
        this.minutesUnits = (minutes % 10).toString();
        this.secondsTens = Math.floor(seconds / 10).toString();
        this.secondsUnits = (seconds % 10).toString();

        // 更新格式化后的倒计时字符串
        this.countdownFormatted.newMacao = `${this.hoursTens}${this.hoursUnits}:${this.minutesTens}${this.minutesUnits}:${this.secondsTens}${this.secondsUnits}`;
      } else if (type === "OLD_MACAO") {
        this.hoursTens2 = Math.floor(hours / 10).toString();
        this.hoursUnits2 = (hours % 10).toString();
        this.minutesTens2 = Math.floor(minutes / 10).toString();
        this.minutesUnits2 = (minutes % 10).toString();
        this.secondsTens2 = Math.floor(seconds / 10).toString();
        this.secondsUnits2 = (seconds % 10).toString();

        this.countdownFormatted.oldMacao = `${this.hoursTens2}${this.hoursUnits2}:${this.minutesTens2}${this.minutesUnits2}:${this.secondsTens2}${this.secondsUnits2}`;
      } else if (type === "HK") {
        this.hoursTens3 = Math.floor(hours / 10).toString();
        this.hoursUnits3 = (hours % 10).toString();
        this.minutesTens3 = Math.floor(minutes / 10).toString();
        this.minutesUnits3 = (minutes % 10).toString();
        this.secondsTens3 = Math.floor(seconds / 10).toString();
        this.secondsUnits3 = (seconds % 10).toString();

        this.countdownFormatted.hkLottery = `${this.hoursTens3}${this.hoursUnits3}:${this.minutesTens3}${this.minutesUnits3}:${this.secondsTens3}${this.secondsUnits3}`;
      }
    },

    // 处理错误
    handleLotteryError(type) {
      const config = LOTTERY_CONFIG[type];
      this[config.stateKey] = [
        {
          ...DEFAULT_LOTTERY_DATA,
          info: "數據獲取失敗",
        },
      ];
    },

    // UI相关方法保持不变
    getDeviceWidth() {
      const systemInfo = uni.getSystemInfoSync();
      this.deviceWidth = systemInfo.screenWidth >= 768 ? 350 : null;
    },

    // 修改 formatDateTime 方法，增加错误处理
    formatDateTime(dateTimeStr) {
      try {
        // 如果输入为空，返回空字符串
        if (!dateTimeStr) return "";

        // 创建日期对象
        const dateTime = new Date(dateTimeStr);

        // 检查是否是有效日期
        if (isNaN(dateTime.getTime())) {
          console.warn("Invalid date:", dateTimeStr);
          return dateTimeStr; // 返回原始字符串
        }

        // 获取日期部分
        const year = dateTime.getFullYear();
        const month = String(dateTime.getMonth() + 1).padStart(2, "0");
        const day = String(dateTime.getDate()).padStart(2, "0");

        // 获取时间部分
        const hours = String(dateTime.getHours()).padStart(2, "0");
        const minutes = String(dateTime.getMinutes()).padStart(2, "0");

        // 返回格式化的日期时间
        return `${year}/${month}/${day} 21点30分`;
      } catch (error) {
        console.error("Error formatting date:", error);
        return dateTimeStr; // 发生错误时回原始字符串
      }
    },
    addOneDay(timeString) {
      try {
        // 创建一个 Date 对象
        const date = new Date(timeString);

        // 检查日期是否有效
        if (isNaN(date.getTime())) {
          throw new Error("Invalid date string");
        }

        // 加一天（毫秒数）
        date.setDate(date.getDate() + 1);

        // 格式化日期为字符串
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，需要+1
        const day = String(date.getDate()).padStart(2, "0");
        const hours = String(date.getHours()).padStart(2, "0");
        const minutes = String(date.getMinutes()).padStart(2, "0");
        const seconds = String(date.getSeconds()).padStart(2, "0");

        // 返回新的时间字符串
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      } catch (error) {
        console.error("Error in addOneDay:", error);
        return timeString;
      }
    },
    // 修改 getXGDay 方法，增加错误处理
    getXGDay(dateStr) {
      try {
        if (!dateStr) return "";

        // 获取当前日期
        const currentDate = new Date();
        const year = currentDate.getFullYear();
        const month = currentDate.getMonth() + 1; // 获取当前月份
        const day = parseInt(dateStr);
        console.log(
          `${year}-${String(month).padStart(2, "0")}-${String(day).padStart(
            2,
            "0"
          )} 21:30:00`,
          "dadadaadads"
        );
        // 格式化日期字符串
        return `${year}-${String(month).padStart(2, "0")}-${String(
          day
        ).padStart(2, "0")} 21:30:00`;
      } catch (error) {
        console.error("Error in getXGDay:", error, "Input:", dateStr);
        return "";
      }
    },
    // 获取彩票数据
    async fetchLotteryData(type) {
      const config = LOTTERY_CONFIG[type];
      try {
        let result = await this[config.api]();

        if (type === "HK") {
          const nextIssue = await this[config.nextIssueApi]();
          result.nextDrawTime = this.lotteryManager.getHKDrawTime(
            nextIssue.result.data.next_issue
          );
        }

        await this.processLotteryData(type, result);
      } catch (error) {
        console.error(`获取${config.name}数据失败:`, error);
        this.handleError(type);
      }
    },

    // 修改 updateIssueInfo 方法中处理香港彩的部分
    async updateIssueInfo(type, data) {
      console.log(data, "dataupdateIssueInfo");
      const config = LOTTERY_CONFIG[type];
      if (!this.issueInfo[config.key]) {
        this.issueInfo[config.key] = {
          current: "",
          next: "",
          drawTime: null,
        };
      }

      try {
        let nextIssue = "";
        if (data.issue) {
          nextIssue = String(Number(data.issue) + 1);
        }

        let drawTime = null;
        let nextDrawTime = null;

        if (type === "HK") {
          // 香港彩特殊处理
          console.log(data, "data.nextDrawTime");
          if (data.nextDrawTime) {
            drawTime = data.nextDrawTime;
          } else  {
            const nextIssue = await gethkLott2();
            // const nextIssue = {
            //     "data": {
            //       "nextTime": "2024-12-14 23:03:00",
            //     }
            //   }
            drawTime = nextIssue.data.nextTime;
          }
          nextDrawTime = drawTime;
        } else {
          // 澳门彩处理
          drawTime = data.openTime;
          // 使用 addOneDay 计算下一期开奖时间
          nextDrawTime = this.addOneDay(data.openTime);
        }

        this.issueInfo[config.key] = {
          current: data.issue || "",
          next: nextIssue,
          drawTime: drawTime,
        };

        // 更新显示文本
        if (type === "HK") {
          console.log(drawTime, nextDrawTime, "drawTime");
          this.last_three.issue = data.issue || "";
          this.last_three.textTime = this.formatDateTime(nextDrawTime);
          console.log(this.last_three.textTime, "this.last_three.textTime");
        } else if (type === "NEW_MACAO") {
          this.last_one.issue = data.issue || "";
          this.last_one.textTime = this.formatDateTime(nextDrawTime); // 使用下一期时间
        } else if (type === "OLD_MACAO") {
          this.last_two.issue = data.issue || "";
          this.last_two.textTime = this.formatDateTime(nextDrawTime); // 使用下一期时间
        }
      } catch (error) {
        console.error("Error in updateIssueInfo:", error);
        // 出错时使用默认值
        this.issueInfo[config.key] = {
          current: data.issue || "",
          next: "",
          drawTime: null,
        };
      }
    },
    testWebSocket() {
      try {
        // 创建WebSocket连接并指定origin
        const ws = new WebSocket('wss://zhibo.dghmfcyy.com:883/Ws.ashx');
        
        ws.onopen = () => {
          console.log('WebSocket连接成功');
          // 连接成功后发送初始化消息
          ws.send(JSON.stringify({
           
          }));
          
          uni.showToast({
            title: 'WebSocket连接成功',
            icon: 'success'
          });
        };
        
        ws.onerror = (error) => {
          console.error('WebSocket连接错误:', error);
          uni.showToast({
            title: 'WebSocket连接失败',
            icon: 'error'
          });
        };
        
        ws.onclose = () => {
          console.log('WebSocket连接已关闭');
        };
        
        ws.onmessage = (event) => {
          console.log('收到消息:', event.data);
          try {
            // 尝试解析收到的数据
            const data = JSON.parse(event.data);
            console.log('解析后的数据:', data);
          } catch (e) {
            console.log('原始数据:', event.data);
          }
        };
        
        this.ws = ws;
        
      } catch (error) {
        console.error('创建WebSocket实例失败:', error);
        uni.showToast({
          title: '创建WebSocket失败',
          icon: 'error'
        });
      }
    },
	testWebSocket2() {
	  try {
	    // 创建WebSocket连接并指定origin
	    const ws = new WebSocket('wss://zhibo.chong0123.com:884/Ws.ashx');
	    
	    ws.onopen = () => {
	      console.log('WebSocket连接成功');
	      // 连接成功后发送初始化消息
	      ws.send(JSON.stringify({ 
	      }));
	      uni.showToast({
	        title: 'WebSocket连接成功',
	        icon: 'success'
	      });
	    };
	    
	    ws.onerror = (error) => {
	      console.error('WebSocket连接错误:', error);
	      uni.showToast({
	        title: 'WebSocket连接失败',
	        icon: 'error'
	      });
	    };
      
	    ws.onclose = () => {
	      console.log('WebSocket连接已关闭');
	    };
	    
	    ws.onmessage = (event) => {
	      console.log('收到消息:', event.data);
	      try {
	        // 尝试解析收到的数据
	        const data = JSON.parse(event.data);
	        console.log('解析后的数据:', data);
	      } catch (e) {
	        console.log('原始数据:', event.data);
	      }
	    };
	    this.ws = ws;
	  } catch (error) {
	    console.error('创建WebSocket实例失败:', error);
	    uni.showToast({
	      title: '创建WebSocket失败',
	      icon: 'error'
	    });
	  }
	}
  },
};
</script>

<style scoped lang="scss">
.hide:after {
  position: absolute;
  content: "";
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px);
}

.ceo_youshi_box ul li {
  list-style: none;
}

.article-content h5:before {
  top: 10px;
  background: #fff;
}

.canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 200px;
}

.list-boder {
  border: 2px #a19999 solid;
  // padding: 0.307rem;
  margin-bottom: 5px;
  box-shadow: 0px 0px 10px #a19999;
}

.page-mobile {
  height: 100vh;
  box-sizing: border-box;
  // width: 90%;
  // margin: 0 auto;

  .content-box {
    background: #fff;
    margin: 0 auto;
    padding: 10px 0;

    .open_code_zone_left-content {
      width: 98%;
      display: flex;
      justify-content: start;
      gap: 9.7rpx;
      margin: 0 auto;

      .open_code_zone_left-item {

        // margin: 0 auto;
        .open_code_zone_left-item-plus {
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 18px;
          color: #da0f1f;
          font-weight: bolder;
        }

        .open_code_zone_left-item-zodiac {
          font-size: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 800;
        }

        .open_code_zone_left-item-number {
          width: 1.2rem;
          height: 1.2rem;
          background-color: #ccc;
          font-size: 27px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #000;
          text-align: center;
          line-height: 1.2rem;
          font-family: PingFangSC-Regular, Microsoft YaHei, Helvetica,
            sans-serif !important;
        }
      }
    }

    .title-btn {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;

      .title-info-r {
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: #1a3d96;
        font-size: 15px;
      }

      .mipai-box {
        width: 20%;
        height: 100%;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;

        .operate-btn-4 {
          display: flex;
          align-items: center;
        }
      }

      .title-btn-countdown {

        // width: 80%;
        // padding-left: 2px;
        .countdown {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;

          // margin-top: 10px;
          .countdown-box {
            flex: 1;
            display: flex;
            align-items: center;

            .countdown-split {
              width: 100%;
              text-align: center;
              font-weight: 700;
              font-size: 15px;
            }

            .countdown-item {
              // width: 44.17px;
              box-sizing: border-box;
              // padding: 1px;
              text-align: center;
              color: #000;
              font-weight: 700;
              background-color: #fff;
              // border: .003rem solid #8c8585;
              border-radius: 3px;
              // margin-left: 4px;
              font-size: 15px;
            }
          }
        }
      }
    }
  }

  .title-info {
    display: flex;
    align-items: center;
    height: 53px;
    border: 0.027rem solid #1a3d96;
    margin: 0 auto;
    border-radius: 5px;
    justify-content: space-between;
    padding: 0 7px;
    box-sizing: border-box;
    background-color: #f6f6f6;

    .mipai-box {
      width: 20%;
      height: 100%;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20px;

      .operate-btn-4 {
        display: flex;
        align-items: center;
      }
    }

    .title-info-l {
      font-size: 20px;
      font-weight: bolder;
      color: #1a3d96;
      display: flex;
      white-space: nowrap;
    }

    .title-info-r {
      display: flex;
      flex-direction: column;
      justify-content: center;
      color: #1a3d96;
      font-size: 14px;
    }
  }

  .carousel-container {
    width: 98%;
    margin: 0 auto;
    height: 250rpx;
    margin-top: -15px;
  }

  .carousel-slide {
    width: 100%;
    height: 250rpx;
  }

  .carousel-slide {
    >image {
      width: 100%;
      height: 250rpx;
      border-radius: 0.213rem;
      overflow: hidden;
    }
  }

  .frequency-box {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 0 2.57px;
    white-space: nowrap;

    .frequency-item {
      color: #000;
      background-color: #ded9d9;
      font-weight: bolder;
      font-size: 17px;
      border-radius: 5px;
      padding: 7px;
      margin-right: 7px;
      cursor: pointer;
    }

    .active {
      color: #fff !important;
      background-color: #1a3d96 !important;
    }
  }

  .nav-logo {
    padding: 0 5px;

    .logo-image {
      width: 90px;
      height: 20px;
    }

    .switch_style {
      // width: 180rpx;
      // height:60rpx;
      display: inline-block;
      font-style: normal;
      border-radius: 3px;
      padding: 1.2px 2.5px;
      color: #fff;
      background: #1a3d96;
      font-size: 15px;
      text-align: center;
      line-height: 60rpx;
      cursor: pointer;
    }
  }
}
</style>
